<div fxLayout="row" fxLayoutAlign="center center" style="height: 100%;">
  <div class="register mat-elevation-z12">
    <div class="register-header" fxLayout="column" fxLayoutAlign="center center">
      注册账号
    </div>
    <form #form="ngForm" (ngSubmit)="register()">
      <div class="register-content" fxLayout="column" fxLayoutAlign="start stretch">
        <mat-input-container>
          <input matInput placeholder="昵称" type="text" name="name" required [(ngModel)]="name">
        </mat-input-container>
        <mat-input-container>
          <input matInput placeholder="邮箱" type="text" name="email" required [(ngModel)]="email">
        </mat-input-container>
        <mat-input-container>
          <input matInput placeholder="密码" type="password" name="password" required [(ngModel)]="password">
        </mat-input-container>
        <mat-input-container>
          <input matInput placeholder="确认密码" type="password" name="password-confirm" required [(ngModel)]="passwordConfirm">
        </mat-input-container>
        <div class="extra-options" fxLayout="row" fxLayoutAlign="center center">
          <mat-checkbox class="remember-me">我同意 <a href="javascript:;">注册协议</a></mat-checkbox>
        </div>
        <button color="primary" mat-raised-button [disabled]="!form.valid">创建账户</button>
        <p class="note">已经有账户?<br/> <a [routerLink]="['/sigin']">登录</a></p>
      </div>
    </form>
  </div>
</div>
